<template>
  <div class="header">
    <div class="icon-wrap"
         @click="handleBack">
      <i class="iconfont">&#xe633;</i>
    </div>
    <p class="desc">{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'CommonHeader',
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleBack () {
      if (window.history.length <= 1) {
        this.$router.push({
          path: '/'
        })
      } else {
        this.$router.back()
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.header
  position fixed
  top 0
  left 0
  width 100%
  height 88px
  background $common_bgc
  box-shadow 0px 6px 14px 0px $header
  line-height 88px
  font-size $back_fz
  font-weight 500
  color $footer_bgc
  display flex
  box-shadow 0px 5px 12px 0px rgba(47, 53, 66, 0.16)

  .desc
    flex 1
    line-height 88px
    margin-left 52px

  .icon-wrap
    width 52px
    height 100%
    line-height 88px
    text-align center

    &:active
      background-color $recommend_title

    i
      font-size $shop_name
      color $common_fz_color
</style>
